<!--
 * @Author: early-autumn
 * @Date: 2020-06-05 13:50:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-06-30 14:34:58
-->
<template>
  <div v-loading="loading">
    <el-timeline v-if="total > 0">
      <el-timeline-item
        v-for="item in entries"
        :key="item.yiyaMainClosingEntries.id"
        :timestamp="item.yiyaMainClosingEntries.createTime"
        placement="top"
        type="primary"
      >
        <el-card shadow="hover">
          <template slot="header">
            <div class="card__header">
              <div>
                <el-tag effect="plain">
                  {{ billingTypeEnum[item.yiyaMainClosingEntries.type] }}
                </el-tag>
                <el-tag
                  effect="plain"
                  :type="
                    ['', '', 'warning', 'success'][
                      item.yiyaMainClosingEntries.billStatus
                    ]
                  "
                >
                  {{
                    billingStatusEnum[item.yiyaMainClosingEntries.billStatus]
                  }}
                </el-tag>
              </div>
              <div>
                <el-button
                  v-if="
                    billingTypeEnum[item.yiyaMainClosingEntries.type] ===
                      '项目开单' &&
                    billingStatusEnum[
                      item.yiyaMainClosingEntries.billStatus
                    ] !== '已结账'
                  "
                  type="text"
                  size="mini"
                  @click="handleToOrder(item)"
                >
                  修改项目
                </el-button>
                <el-button
                  v-if="
                    billingStatusEnum[
                      item.yiyaMainClosingEntries.billStatus
                    ] !== '已结账'
                  "
                  type="text"
                  size="mini"
                  @click="handleDelete(item.yiyaMainClosingEntries.id)"
                >
                  删除
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="handlePrintPanel(item)"
                  >打印确认单</el-button
                >
              </div>
            </div>
          </template>
          <el-form inline>
            <el-form-item>
              <span style="font-size: 16px">
                {{ item.yiyaBillingMain.clinic }}
              </span>
            </el-form-item>
            <el-form-item label="开单TC">
              {{ item.yiyaBillingMain.tc }}
            </el-form-item>
          </el-form>
          <el-table
            stripe
            border
            show-summary
            :summary-method="getSummaries"
            :data="item.yiyaItemBillingExtends"
          >
            <el-table-column
              label="项目名称"
              align="center"
              min-width="150"
              prop="itemName"
            ></el-table-column>
            <el-table-column
              label="医生"
              align="center"
              prop="doctor"
              min-width="100"
            ></el-table-column>
            <el-table-column
              label="单价（元）"
              align="center"
              prop="unitPrice"
              min-width="100"
            ></el-table-column>
            <el-table-column label="数量/单位" align="center">
              <template slot-scope="scope">
                {{ scope.row.count }} {{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column
              label="原价（元）"
              align="center"
              prop="originalPrice"
              min-width="100"
            ></el-table-column>
            <el-table-column
              label="折扣（%）"
              align="center"
              prop="discount"
              min-width="100"
            ></el-table-column>
            <el-table-column
              label="折后价格（元）"
              align="center"
              prop="discountPrice"
              min-width="120"
            ></el-table-column>
            <el-table-column
              label="储值金划扣金额（元）"
              align="center"
              min-width="160"
              prop="petCardAmount"
            ></el-table-column>
            <el-table-column
              label="优惠抵扣金额（元）"
              align="center"
              min-width="150"
              prop="deductionAmount"
            ></el-table-column>
            <el-table-column
              label="项目应收（元）"
              align="center"
              prop="receivablePrice"
              min-width="120"
            ></el-table-column>
            <el-table-column
              label="项目已收（元）"
              align="center"
              prop="payAmount"
              min-width="120"
            ></el-table-column>
            <el-table-column
              label="本次交费（元）"
              align="center"
              prop="payAmount"
              min-width="120"
            >
              <strong slot-scope="scope">
                {{ scope.row.payAmount }}
              </strong>
            </el-table-column>
            <el-table-column
              label="项目欠款（元）"
              align="center"
              prop="owingPrice"
              min-width="120"
            >
              <span slot-scope="scope" style="color: red">
                {{ scope.row.owingPrice }}
              </span>
            </el-table-column>
          </el-table>
          <el-form class="mt20" inline>
            <el-form-item label="备注" style="margin-bottom: 0">
              {{ item.yiyaMainClosingEntries.remarks }}
            </el-form-item>
          </el-form>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <empty v-else></empty>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getEntriesPro"
    ></pagination>
    <to-order
      v-model="toOrderParams.visible"
      :order-id="toOrderParams.id"
      :data="toOrderParams.data"
      :patient="patient"
      :appointment="appointment"
    ></to-order>
    <print-panel
      v-model="printPanel.visible"
      path="/print/billing"
      :data="printPanel.data"
    ></print-panel>
  </div>
</template>

<script>
import { getEntriesPro, delEntriesAll } from '@/api/services/entries'
import { billingTypeEnum, billingStatusEnum } from '@/utils/enums'
import { billDataTransform } from '../utils'

const QUERY_PARAMS = {
  pageNum: 1,
  pageSize: 10,
}

export default {
  name: 'PayOrderRecordPane',
  components: {
    PrintPanel: () => import('@/components/yiya/PrintPanel'),
    Empty: () => import('@/components/yiya/Empty'),
    ToOrder: () => import('./ToOrder'),
  },
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
    appointment: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {},
      entries: [],
      totalMap: new Map(),
      toOrderParams: {
        visible: false,
        id: 0,
        data: [],
      },
      printPanel: {
        visible: false,
        data: {},
      },
    }
  },
  computed: {
    billingTypeEnum() {
      return billingTypeEnum
    },
    billingStatusEnum() {
      return billingStatusEnum
    },
  },
  mounted() {
    this.queryParams = { ...QUERY_PARAMS, clinicPersonId: this.patient.id }
    this.getEntriesPro()
  },
  methods: {
    async getEntriesPro() {
      try {
        this.loading = true
        const { rows, total } = await getEntriesPro(this.queryParams)
        const { dataList, totalMap } = billDataTransform(rows)
        this.entries = dataList
        this.totalMap = totalMap
        this.total = total
      } finally {
        this.loading = false
      }
    },
    getSummaries({ columns, data }) {
      const total = this.totalMap.get(data)
      return columns.map(({ label, property }) =>
        label === '数量/单位' ? '合计' : total[property] || ''
      )
    },
    handleToOrder(e) {
      this.toOrderParams = {
        visible: true,
        id: e.yiyaBillingMain.id,
        data: e.yiyaItemBillingExtends,
      }
    },
    async handleDelete(mainClosingEntriesId) {
      await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      await delEntriesAll({ mainClosingEntriesId })
      this.msgSuccess('删除成功')
      await this.getEntriesPro()
    },
    handlePrintPanel(data) {
      this.printPanel = { visible: true, data: data }
    },
  },
}
</script>

<style lang="scss" scoped>
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
